import { OrderStatusEnums } from '@/pages/OperationCenter/OrderManage/entity';
import { Card, Form, Input, Select, DatePicker2 } from '@alifd/next';
import { FormattedMessage } from 'react-intl';
import styles from './index.module.scss';

interface Props {
  submit: (value: any, errors: any, field: any) => void;
  reset: () => void;
  field: any;
}

function Filter({ submit, reset, field }: Props) {
  return (
    <Card.Content>
      <Form className="filter-form" responsive fullWidth labelAlign="left" field={field}>
        <Form.Item colSpan={4} label="订单号:">
          <Input name="orderNo" hasClear />
        </Form.Item>

        <Form.Item colSpan={4} label="退款状态:">
          <Select name="orderStatus" hasClear dataSource={OrderStatusEnums} />
        </Form.Item>

        <Form.Item colSpan={4} label="退款时间:">
          <DatePicker2.RangePicker className={styles['form-date-picker']} name="appraisalTime" />
        </Form.Item>

        <Form.Item colSpan={8} className={styles['form-actions']}>
          <Form.Submit type="primary" onClick={submit} validate style={{ marginRight: '20px' }}>
            <FormattedMessage id="btn.search" />
          </Form.Submit>
          <Form.Reset onClick={reset}>
            <FormattedMessage id="btn.reset" />
          </Form.Reset>
        </Form.Item>
      </Form>
    </Card.Content>
  );
}

export default Filter;
